<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
    <style>
        html, body {
            height: 100%;
            background: #eee;
        }
        canvas {
            background: #fff;
            display: block;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        var list=[];
        var currentC;
        var _e={};
        var cricle = function(x,y,r){
            this.x=x;
            this.y=y;
            this.r=r;
            this.isCurrent=false;
            this.drawC=function(ctx,x,y){
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(this.x,this.y-this.r);
                ctx.arc(this.x,this.y,this.r,2*Math.PI,0,true);
                if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {


                    ctx.fillStyle = '#ff0000';
                    currentC=this;
                    this.isCurrent=true;

                }else{
                    ctx.fillStyle = '#46e715';
                }
                ctx.fill();
            }

        }
        function draw(){
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');
                for(var i=0;i<10;i++){
                    var c=new cricle(20*i,20*i,5*i);
                    c.drawC(ctx);
                    list.push(c);
                }
            }
        }

        function reDraw(e){
            e=e||event;
            var canvas = document.getElementById('tutorial');
            var x = e.clientX - canvas.offsetLeft;
            var y = e.clientY - canvas.offsetTop;

            canvas.width = canvas.width;
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');
                for(var i=0;i<list.length;i++){
                    var c=list[i];
                    c.drawC(ctx,x,y);


                }
            }

        }

        function show(e){
            e=e||event;
            var canvas = document.getElementById('tutorial');
            var ctx = canvas.getContext('2d');
            var x = e.clientX - canvas.offsetLeft;
            var y = e.clientY - canvas.offsetTop;

            if(currentC){
                currentC.x=parseInt(x+(x-currentC.x)/5);
                currentC.y=parseInt(y+(y-currentC.y)/5);
            }
            _e=e;


        }

        window.onload=function(){

            var canvas = document.getElementById('tutorial');
            draw();

            canvas.onmousedown=function(e){
                e=e||event;
                var x = e.clientX - canvas.offsetLeft;
                var y = e.clientY - canvas.offsetTop;
                if(currentC)
                    currentC.isCurrent=false;
                currentC=null;
                reDraw(e);
                _e=e;
                var showTimer=setInterval(function(e){
                    reDraw(e);
                },10,_e);
                canvas.onmousemove=show;

                document.onmouseup=function(){
                    if(currentC)
                        currentC.isCurrent=false;
                    currentC=null;
                    canvas.onmousemove=null;
                    clearInterval(showTimer);
                }

            }
        }
    </script>
    <style>
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
<div style="background:#0f0;width:100px;height:100px;position:absolute;left:100px;top:100px;z-index:1;" onclick="alert(1);"></div>
<canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
</body>
